:root {
    --width-side: 300px;
    --width-main: 720px;

    --border-radius: 4px;

    --bg-site: #f9fafb;
    --bg-line: #1cd0fd;
    --bg-card: #ffffff;
    --bg-blk: #f1f2f3;
    --bg-hov: #e9eaec;
    --bg-border: #e3e5e8;

    --text-p0: #000;
    --text-p1: #333;
    --text-p2: #4d4d4d;
    --text-p3: #808080;
    --text-p4: #999;
    --text-meta: #ccc;
    --text-warn: #f53900;
    --text-code: #66b2ff26;
    --text-link: #2385d5;
    --text-link-hov: #8bc1ec;

    --shdw: 0 0 2px 0 rgba(0,0,0,.04), 0 0 8px 0 rgba(0,0,0,.04);
    --shdw-hov: 0 1px 4px 0 rgba(0,0,0,.1), 0 4px 16px 0 rgba(0,0,0,.1);
    --shdw-bold: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-site: #1c1e21;
        --bg-card: #373d43;
        --bg-blk: #26292c;
        --bg-border: #383d42;
        --bg-hov: #2f3337;
        --text-p0: #fff;
        --text-p1: #ccc;
        --text-p2: #b3b3b3;
        --text-p3: #858585;
        --text-p4: #707070;
        --text-meta: #4d4d4d;
        --text-warn: #ff6333;
        --text-code: #21222c;
        --text-link: #03cafc;
        --text-link-hov: #2385d5;
    }
}

$border-filters: (
    't': border-top,
    'b': border-bottom,
    'l': border-left,
    'r': border-right
);
$radius-filters: (
    'tl': border-top-left-radius,
    'tr': border-top-right-radius,
    'bl': border-bottom-left-radius,
    'br': border-bottom-right-radius
);
